<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $cfg_soft_lang; ?>" />
    <!--<link href="<?php echo $cfg_templets_skin.'/static/style/aptitudebox.css'?>" rel="stylesheet"/>-->
<title><?php echo $msgtitle; ?></title>
<style type="text/css">
    ul li{
        list-style: none;
    }
    .apt-box .list{
        background-color: #fcfcfc;
        border: 1px solid #e5e5e5;
        margin: 0 34px 18px;
        padding: 14px 10px;
        border-radius: 2px;
    }
    .apt-box .top{
        width: 100%;
        border-left: none;
        border-right: none;
        margin-bottom: 1em;
    }
    .apt-box .top .msg{
        background-color: #FFF;
        line-height: 32px;
        padding: 10px 34px;
        font-size: 12px;
        margin-bottom: 10px;
        max-height: 130px;
        overflow-y: auto;
    }
    .top .msg span{
        display: inline-block;
        vertical-align: middle;
        background-color: #f9841e;
        border-radius: 15px;
        padding: 0 14px 2px;
        color: #fff;
        margin: 0px 5px 2px 0;
        line-height: 26px;
        white-space: nowrap;
    }
    .apt-box .top ul{
        padding: 0 34px;
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 10px;
        display: block;
        overflow: hidden;
    }
    .apt-box .top ul li{
        float: left;
        background: #fcfcfc;
        border-width: 1px 1px 0 1px;
        border-color: #d9d9d9;
        border-style: solid;
        line-height: 29px;
        margin-right: -1px;
        padding-bottom: 1px;
        padding: 0 15px;
        cursor: pointer;
        margin-right: 15px;
    }
    .list span{
        display: inline-block;
        line-height: 30px;
        padding: 0 10px;
        white-space: nowrap;
        cursor: pointer;
        margin: 0 0 1px 1px;
        color: #f9841e;
        position: relative;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    .list span i {
        display: inline-block;
        font-size: 12px;
        color: #F9841E;
        background: #fff;
        width: 14px;
        height: 14px;
        text-align: center;
        line-height: 14px;
        border-radius: 100%;
        font-style: normal;
        margin-left: 3px;
    }
    .list span:hover{
        background: #d5e9f2;
    }
    .list span.active{
        color: #fff;
        background: #f9841e;
    }
   /* .msg span .del{
        display: inline-block;margin-left: 5px;color: #fff;font-size: 18px;cursor: pointer;vertical-align: bottom;margin-left: 5px;margin-right: -5px;font-style: normal;
    }*/
</style>
</head>
<body>
<div class="apt-box">
    <div class="top">
        <div class="msg" data-span="<?php echo $_GET['extend'];?>">
            <em>可选择多项</em>
        </div>
        <ul id="ul-data">
            <li data-evalue=<?php echo $groupName['egroup'];?>><?php echo $groupName['itemname']?></li>
        </ul>
    </div>
    <div class="list">

    </div>
</div>
<script type="text/javascript" src="<?php echo $cfg_templets_skin.'/static/js/jquery.min.js'?>"></script>
<script type="text/javascript">
    var enumData = eval(<?php echo json_encode($enumData);?>);
</script>
<script type="text/javascript">

    $(function () {
        appendSpansTo(enumData, $('.list'));
    });

    function appendSpansTo(enumData, elements ) {
        $.each(enumData, function (key, item) {
            var exist = $(elements).find('#'+item.evalue);
            if(exist > 0){
                return false;
            }

            var span = $('<span></span>');
            var msgData = $(".msg").data('span');
            var del = $("<i class='del' style='display: inline-block;margin-left: 5px;color: #fff;font-size: 18px;cursor: pointer;vertical-align: bottom;margin-left: 5px;margin-right: -5px;font-style: normal;'>×</i>");

            span.html(item.ename);
            span.attr('data-evalue', item.evalue);
            span.attr('id', item.evalue);
            del.on('click',function () {
                doDel($(this));
            });
            if( msgData.length && $.inArray(item.evalue, msgData.split(',')) != -1 ) {
                $('.msg').append(span.clone().append(del));
                span.addClass('active');
            }
            sonAddEvent(span);
            elements.append(span);
        });
    }

    function sonAddEvent(son) {
        son.on('click',function () {
            var msg = $(".msg");
            var spans = msg.data("span");
            var sArr = spans === 'undefined' ? []: spans.toString().split(',');
            var del = $("<i class='del' style='display: inline-block;margin-left: 5px;color: #fff;font-size: 18px;cursor: pointer;vertical-align: bottom;margin-left: 5px;margin-right: -5px;font-style: normal;'>×</i>");
            del.on('click',function () {
                doDel($(this));
            });
            var sonTwins = son.clone().append(del);
            var sonEvalue = $(this).data("evalue").toString();
            var index = $.inArray(sonEvalue,sArr);
            sArr = sArr.filter(d=>d);

            if( !sArr.length || index == -1){ // 添加
                sArr.push(sonEvalue);
                msg.append(sonTwins);
                $(this).addClass('active');
            } else { // 删除
                msg.find('#'+sonEvalue).remove();
                sArr.splice(index,1);
                $(this).removeClass('active');
            }

            msg.data('span',sArr.join());
        });
    }

    function doDel(_this) {
        // 把记录的data 值删除
        var _eValue = _this.parent().data('evalue').toString();
        var msg = _this.parents('.msg');
        var data = msg.data('span');
        if(data == undefined || data == '' || data == null){
            return false;
        }
        var dataArr = data.toString().split(',');
        var index = $.inArray(_eValue, dataArr);
        if(index == -1){ // 肯定能找到，，
            return false;
        }

        dataArr.splice(index,1);
        msg.data('span', dataArr.join());

        // 把双胞胎元素样式置为未选中状态(如果存在)
        var dist = $('.list').find('#'+_eValue);
        if(dist.length > 0){
            dist.removeClass('active');
        }

        // 父级选中数减1(如果就父级,找到父级)
        var parent = _this.parent().data('parent');
        var maxTop = $('.list').find('#'+parent);
        if(maxTop.length > 0){
            var num = maxTop.find('.num');
            var resNum = parseInt(num.text()) - 1;
            if(resNum <= 0 ){
                num.remove();
                maxTop.removeClass('active');
            }
            num.html(resNum);
        }

        // 把自己删除
        _this.parent().remove();
        return true;
    }

    function getMsg() {
        return $(".top");
    }

    function getName() {
        return $("#ul-data").children("li:first").data('evalue');
    }


</script>
</body>
</html>
